<template>
  <div style="height: 100%;">
    
    
    <div class="box1">
     
      <div style="width: 100%;height: 30%;margin-top: 1.5vh;">
                
        
        <el-form :inline="true" :model="formInline" style="margin-left: 2vh;text-align: left;margin-top: 1vh;width: 100%;" class="demo-form-inline">
          <el-form-item label="数据指标:">
            <el-radio-group @change="retrievePemfcDataBase()" v-model="dataIndicators">
              <el-radio-button label="pemfc_db_plan">规划</el-radio-button>
              <el-radio-button label="pemfc_db_design">设计</el-radio-button>
              <el-radio-button label="pemfc_db_produce">生产</el-radio-button>
              <el-radio-button label="pemfc_db_run">运行</el-radio-button>
              <el-radio-button label="pemfc_db_maintenance">维护</el-radio-button> 
              <el-radio-button label="pemfc_db_recycling">回收利用</el-radio-button> 

            </el-radio-group>
          </el-form-item>

          <!-- <el-form-item label="数据编号:">
            <el-input style="width: 90%;margin-top: 0vh;" v-model="dataNo"></el-input>
          </el-form-item> -->

          <el-form-item label="数据名称:">
            <el-input style="width: 90%;margin-top: 0vh;" v-model="dataName"></el-input>
          </el-form-item>

          <el-button type="primary" v-if="this.dataIndicators!='pemfc_db_recycling'" @click="deletePemfcDataBase()" style="float: right;margin-right: 3vh;">
            <span class="button-text">删除</span>
          </el-button>

          <el-button type="primary" @click="retrievePemfcDataBase()" style="float: right;margin-right: 3vh;">
            <span class="button-text">查询</span>
          </el-button>
     

        </el-form>
      
      </div>

    </div>

    
    
    <div class="box2">

      <el-table ref="multipleTable" height="680" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
  
        <!-- <el-table-column
          prop="dataIndicators"
          label="数据指标" 
          align="center"
          width="120">
        </el-table-column> -->

        <!-- <el-table-column
          prop="dataNo"
          label="数据编号"
          align="center"
          width="120">
        </el-table-column> -->
        
        <el-table-column
          prop="dataName"
          label="数据名称"
          align="center"
          width="150">
        </el-table-column>

        <el-table-column
            v-for="item in columnData"
            :key="item"
            :label="item.label" 
            :prop="item.prop" 
            align="center"
            width="200"
        >
        </el-table-column>
     
      </el-table>

    </div>

  </div>
</template>

<script>
 

  export default {
    name: 'pemfcDataBase',
    components: {
      
     },

    data() {
      return {
        dataIndicators:"pemfc_db_plan",
        dataNo:"",
        dataName:"",
        tableData:[

        ],
        columnData:[
 
        ],
        multipleSelection: []
      }
    },
    mounted: function() {
      this.retrievePemfcDataBase();
    },
    methods: {  
      retrievePemfcDataBase:function(){
        
        var vm = this;

        this.$http.post('/iepsapi/ieps/basicDatabase/retrieveDataBase?dataIndicators='+this.dataIndicators+"&dataNo="+this.dataNo+"&dataName="+this.dataName).then((res) => {
          var result = res.data;
           
          if(result){
            vm.columnData = result.columnData;
            vm.tableData = result.tableData;
          }
        }).catch((error) => {
          console.log(error);
        });


      },
      
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      deletePemfcDataBase:function(){
        
        if(this.multipleSelection.length == 0){
          this.$message({
            message: '请选择您要删除的数据',
            type: 'info'
          });
        }else{

          this.$confirm('该操作将删除所选择的数据, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {

            var vm = this;

            var ids = "";
            for(var i = 0;i < this.multipleSelection.length;i++){
              ids+=this.multipleSelection[i].id+",";
            }

            this.$http.post('/iepsapi/ieps/basicDatabase/deleteDataBase?dataIndicators='+this.dataIndicators+"&deleteData="+(ids)).then((res) => {
              var result = res.data;
              
              if(result){
                
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                });

                vm.retrievePemfcDataBase();
                
              }
            }).catch((error) => {
              console.log(error);
            });

          });
        }

      },

    }
  }
</script>

<style scoped>



    .titleDiv {
      width: 100%;
      margin: 0.5vh;
      height: 2.5vh; 
      font-weight: bold; 
      -webkit-box-shadow: none;
      box-shadow: none;
      font-weight: 700;
      font-style: normal;
      font-size: 2vh;
      color: #f2f2f2;
      text-align: left;
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;
      position: relative;
    }
    .barColorBox {
      height: 2.5vh;
      width: 0.7vh;
      border-radius: 1px;
      display: inline-block;
      vertical-align: text-bottom;
      border: none;
      box-shadow: 0 -1px 10px rgba(0,0,0,0.1);
      background-color: #FAFAFA;
      background-image: -webkit-linear-gradient(top,#17b4db,#07c968);
      background-image: -o-linear-gradient(top,#17b4db,#07c968);
      background-image: -ms-linear-gradient(top,#17b4db,#07c968);
      background-image: linear-gradient(top,#17b4db,#07c968);
      background-repeat: repeat-x;
    }

    .titlefont {
      flex: 1;
      height: 100%;
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;
      font-size: 1.8vh;
      padding-left: 5px;
      margin-top: 0vh;
    }

    .box1{ 
      width: 100%;
      height: 7vh;
      margin: 0 auto;
      background: #101b55e3;
      border: 1px solid rgb(62 111 219 / 88%);
      border-radius: 5px;
    }

    
    .box2{ 
      width: 100%;
      height: 74vh;
      padding:10px;
      margin: 1vh auto;
      background: #101b55e3;
      border: 1px solid rgb(62 111 219 / 88%);
      border-radius: 5px;
    }


</style>
